{extend name="_/layout" /}

{block name="style"}
<link rel="stylesheet" href="__PLUGIN__/sweetalert/sweetalert.css" />
<link rel="stylesheet" href="__PLUGIN__/croppic/croppic.css" />
{/block}

{block name="body"}
<section class="content">
    <div class="container-fluid">
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="header bg-purple">
                        <h2>基本信息</h2>
                    </div>
                    <div class="body">
                        <div class="media" style="margin-bottom:0">
                            <div class="media-left">
                                <div id="userface" class="croppic" {notempty name='auth_user->detail->userface'}style="background:url('{$auth_user->detail->userface}') center center no-repeat;background-size:100%"{/notempty}></div>
                            </div>
                            <div class="media-body">
                                <div class="row clearfix" style="margin-left:0"><div class="col-md-12"><button id="btn_edit" type="button" class="btn btn-primary waves-effect pull-right">编辑</button></div></div>
                                <form id="edit_form" novalidate="novalidate" class="row clearfix" style="margin-left:0">
                                    <div class="col-md-12">
                                        <b>昵称</b>
                                        <div class="input-group">
                                            <div class="form-line">
                                                <input type="text" id="nickname" name="nickname" value="{$auth_user->detail->nickname}" class="form-control" disabled/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <b>性别</b>
                                        <div class="input-group">
                                            <div class="form-line">
                                                <input name="gender" value="0" {eq name="$auth_user->detail->gender" value="0"}checked{/eq} id="gender_s" type="radio" class="form-control" disabled /><label for="gender_s">保密</label>
                                                <input name="gender" value="1" {eq name="$auth_user->detail->gender" value="1"}checked{/eq} id="gender_m" type="radio" class="form-control" disabled /><label for="gender_m">男</label>
                                                <input name="gender" value="2" {eq name="$auth_user->detail->gender" value="2"}checked{/eq} id="gender_f" type="radio" class="form-control" disabled /><label for="gender_f">女</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <b>生日</b>
                                        <div class="input-group">
                                            <div class="form-line">
                                                <input type="text" name="birthday" value="{$auth_user->detail->birthday}" class="form-control" disabled />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <b>学历</b>
                                        <div class="input-group">
                                            <div class="form-line">
                                                <input type="text" name="diploma" value="{$auth_user->detail->diploma}" class="form-control" disabled />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <b>学校</b>
                                        <div class="input-group">
                                            <div class="form-line">
                                                <input type="text" name="school" value="{$auth_user->detail->school}" class="form-control" disabled />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <b>故乡</b>
                                        <div class="input-group">
                                            <div class="form-line">
                                                <input type="text" name="hometown" value="{$auth_user->detail->hometown}" class="form-control" disabled />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <b>住址</b>
                                        <div class="input-group">
                                            <div class="form-line">
                                                <input type="text" name="address" value="{$auth_user->detail->address}" class="form-control" disabled />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <b>住址邮编</b>
                                        <div class="input-group">
                                            <div class="form-line">
                                                <input type="text" name="zipcode" value="{$auth_user->detail->zipcode}" class="form-control" disabled />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <b>个人签名</b>
                                        <div class="input-group">
                                            <div class="form-line">
                                                <textarea name="signature" class="form-control no-resize" disabled>{$auth_user->detail->signature}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <b>个人说明</b>
                                        <div class="input-group">
                                            <div class="form-line">
                                                <textarea name="brief" class="form-control no-resize" disabled>{$auth_user->detail->brief}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <button id="btn_edit_save" type="submit" data-type="ajax-loader" class="btn btn-success waves-effect hide">保存</button>
                                        <button id="btn_edit_cancel" type="reset" class="btn btn-cancel waves-effect hide" style="margin-left:10px">重置</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="header bg-green">
                        <h2>账号绑定</h2>
                    </div>
                    <div class="body">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-md-12" style="margin-bottom:0">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="material-icons">phone</i></span>
                                            <div class="form-line">
                                                <input id="mobile" data-type="mobile" type="text" class="form-control" value="{$auth_user->mobile}" placeholder="手机号" {notempty name="$auth_user->mobile"}disabled{/notempty} />
                                                <button class="btn btn-success waves-effect btn-bind" style="position:absolute;right:0;z-index:10">
                                                    {if condition="$auth_user->mobile"}解绑{else}获取验证码{/if}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-md-12" style="margin-bottom:0">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="material-icons">email</i></span>
                                            <div class="form-line">
                                                <input id="email" data-type="email" type="text" class="form-control" value="{$auth_user->email}" placeholder="邮箱" {notempty name="$auth_user->email"}disabled{/notempty} />
                                                <button class="btn btn-success waves-effect btn-bind" style="position:absolute;right:0;z-index:10">
                                                    {if condition="$auth_user->email"}解绑{else}获取验证码{/if}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">QQ <span class="badge bg-orange">绑定</span></li>
                            <li class="list-group-item">微信 <span class="badge bg-teal">绑定</span></li>
                            <li class="list-group-item">微博 <span class="badge bg-purple">绑定</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{/block}

{block name="script"}
<script src="__PLUGIN__/momentjs/moment.js"></script>
<script src="__PLUGIN__/croppic/croppic.min.js"></script>
<script src="__PLUGIN__/sweetalert/sweetalert.min.js"></script>
<script src="__PLUGIN__/jquery-validation/jquery.validate.js"></script>
<script src="__PLUGIN__/jquery-validation/localization/messages_zh.js"></script>
<script>
    $(function() {
        var croppic = new Croppic('userface', {
            onAfterImgCrop:function(data){
                $('#leftsidebar .user-info .image img').attr('src', data.url);
                $('#userface').find('.cropControlRemoveCroppedImage').remove();
            },
            onReset:function(){ $('#userface').find('.cropControlRemoveCroppedImage').remove(); },
            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div>',
            uploadUrl: "{:url('user/userface')}",
            cropUrl: "{:url('user/userface', ['is_copy' => true])}",
        });
        $('#btn_edit').click(function(){
            $(this).attr('disabled', true);
            $('#edit_form .form-control').removeAttr('disabled').first().focus();
            $('#btn_edit_save,#btn_edit_cancel').removeClass('hide');
        });
        $('#edit_form').validate({
            debug: true,
            rules: {
                'birthday': {
                    date_rule: true
                },
            },
            highlight: function(input) {
                $(input).parents('.form-line').addClass('error');
            },
            unhighlight: function(input) {
                $(input).parents('.form-line').removeClass('error');
            },
            errorPlacement: function(error, element) {
                $(element).parents('.form-group').append(error);
            },
            submitHandler: function(form) {
                swal({
                    title: "确定保存?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#4CAF50",
                    confirmButtonText: "提交",
                    cancelButtonText: "取消",
                    closeOnConfirm: false,
                    closeOnCancel: false,
                    showLoaderOnConfirm: true,
                }, function (isConfirm) {
                    if (isConfirm) {
                        $.post("{:url('user/profile')}", $(form).serialize(), function(data) {
                            swal(data.msg, '', data.code == 1000 ? 'success' : 'error');
                            if(data.code == 1000) location.reload();
                        }, 'json');
                    } else {
                        swal('操作已取消!', '', 'error');
                    }
                });
            }
        });
        $.validator.addMethod('date_rule', function(value, element) {
            if(moment(value, "YYYY-MM-DD").isValid()) return Number(value.split('-')[0]) >= 1970 ? true : false;
            return false;
        }, '请输入正确日期格式');
        
        $('.btn-bind').click(function(){
            var _this = $(this), _input = _this.prev();
            var type = _input.data('type'), value = _input.val();
            if(type == 'mobile' && !/^1[345789]\d{9}$/.test(value)) {
                swal('手机格式错误', '', 'error');
                return false;
            }else if(type == 'email' && !/^\w+@\w+(\.\w+)*$/i.test(value)) {
                swal('邮箱格式错误', '', 'error');
                return false;
            }
            if(_input.attr('disabled')){
                _this.text('获取验证码');
                _input.removeAttr('disabled').focus();
            }else{
                $.post("{:url('user/send_code')}", {type:type,value:value}, function(data){
                    if(data.code == 1000) {
                        swal({
                            title: "验证码已发送",
                            type: "input",
                            showCancelButton: true,
                            confirmButtonColor: "#4CAF50",
                            confirmButtonText: "提交",
                            cancelButtonText: "取消",
                            closeOnConfirm: false,
                            closeOnCancel: true,
                            showLoaderOnConfirm: true,
                            inputPlaceholder: "请输入收到的验证码"
                        }, function (code) {
                            if (code === false) return false;
                            if (code !== '') {
                                $.post("{:url('user/bind')}", {code:code,type:type,value:value}, function(data) {
                                    swal(data.msg, '', data.code == 1000 ? 'success' : 'error');
                                    if(type == 'email') $('#leftsidebar .user-info .info-container .email').text(value);
                                }, 'json');
                            }else{
                                swal.showInputError("请输入验证码后提交!"); return false
                            }
                        });
                    }else{
                        swal('验证码发送失败!', '', 'error');
                    }
                }, 'json');
            }
        })
    });
</script>
{/block}
